* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}
:root {
  --hue: 223;
  --bg: hsl(var(--hue), 90%, 95%);
  --fg: hsl(var(--hue), 90%, 5%);
  font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
  display: grid;
  height: 100vh;
  color: var(--fg);
  font: 1em/1.5 sans-serif;
  background-color: var(--bg);
  transition: background-color 0.3s;
  place-items: center;
}
main {
  padding: 1.5em 0;
}

.lp {
  width: 16em;
  height: 8em;
}
.lp__drops,
.lp__fall_line,
.lp__worm {
  transform-origin: 64px 64px;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}
.lp__drops {
  transform: rotate(90deg);
  visibility: hidden;
  animation-name: drops;
  animation-timing-function: ease-in-out;
  stroke-dasharray: 22 307.85 22;
}
.lp__fall_line {
  animation-name: fallLine1;
  animation-timing-function: ease-in;
  stroke-dasharray: 1 112;
  stroke-dashoffset: 114;
}
.lp__fall_line__delay1 {
  animation-name: fallLine2;
}
.lp__fall_line__delay1 {
  animation-name: fallLine3;
}
.lp__fall_line__delay3 {
  animation-name: fallLine4;
}
.lp__fall_line__delay4 {
  animation-name: fallLine5;
}
.lp__ring {
  transition: stroke 0.3s;
  stroke: hsla(var(--hue), 90%, 5%, 0.1);
}
.lp__worm {
  transform: rotate(-90deg);
  animation-name: worm;
  stroke-dasharray: 43.98 307.87;
  stroke-dashoffset: -131.94;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue), 90%, 5%);
    --fg: hsl(var(--hue), 90%, 95%);
  }
  .lp__ring {
    stroke: hsla(var(--hue), 90%, 95%, 0.1);
  }
}

/* Animtions */
@keyframes drops {
  from {
    visibility: hidden;
    animation-timing-function: steps(1, end);
    stroke-dasharray: 0 351.85 0;
  }
  25% {
    visibility: visible;
    animation-timing-function: ease-in-out;
    stroke-dasharray: 0 351.85 0;
  }
  26% {
    stroke-dasharray: 4 343.85 4;
  }
  27% {
    stroke-dasharray: 8 335.85 8;
  }
  28% {
    stroke-dasharray: 12 327.85 12;
  }
  29% {
    animation-timing-function: ease-in;
    stroke-dasharray: 17 317.85 17;
  }
  32% {
    animation-timing-function: ease-out;
    stroke-dasharray: 25 301.85 25;
  }
  35%,
  47.5% {
    visibility: visible;
    animation-timing-function: linear;
    stroke-dasharray: 22 307.85 22;
  }
  50% {
    visibility: hidden;
    animation-timing-function: steps(1, end);
    stroke-dasharray: 0 307.85 43.98;
  }
  75% {
    visibility: visible;
    animation-timing-function: ease-in-out;
    stroke-dasharray: 0 351.85 0;
  }
  76% {
    stroke-dasharray: 4 343.85 4;
  }
  77% {
    stroke-dasharray: 8 335.85 8;
  }
  78% {
    stroke-dasharray: 12 327.85 12;
  }
  79% {
    animation-timing-function: ease-in;
    stroke-dasharray: 17 317.85 17;
  }
  82% {
    animation-timing-function: ease-out;
    stroke-dasharray: 25 301.85 25;
  }
  85%,
  97.5% {
    visibility: visible;
    animation-timing-function: linear;
    stroke-dasharray: 22 307.85 22;
  }
  to {
    visibility: hidden;
    stroke-dasharray: 43.98 307.85 0;
  }
}
@keyframes fallLine1 {
  from,
  15% {
    stroke-dashoffset: 114;
  }
  25%,
  65% {
    stroke-dashoffset: 1;
  }
  75%,
  to {
    stroke-dashoffset: -112;
  }
}
@keyframes fallLine2 {
  from,
  16% {
    stroke-dashoffset: 114;
  }
  26%,
  66% {
    stroke-dashoffset: 1;
  }
  76%,
  to {
    stroke-dashoffset: -112;
  }
}
@keyframes fallLine3 {
  from,
  17% {
    stroke-dashoffset: 114;
  }
  27%,
  67% {
    stroke-dashoffset: 1;
  }
  77%,
  to {
    stroke-dashoffset: -112;
  }
}
@keyframes fallLine4 {
  from,
  18% {
    stroke-dashoffset: 114;
  }
  28%,
  68% {
    stroke-dashoffset: 1;
  }
  78%,
  to {
    stroke-dashoffset: -112;
  }
}
@keyframes fallLine5 {
  from,
  19% {
    stroke-dashoffset: 114;
  }
  29%,
  69% {
    stroke-dashoffset: 1;
  }
  79%,
  to {
    stroke-dashoffset: -112;
  }
}
@keyframes worm {
  from {
    animation-timing-function: ease-out;
    stroke-dasharray: 87.96 307.87;
    stroke-dashoffset: -131.94;
  }
  25% {
    animation-timing-function: steps(1);
    stroke-dasharray: 87.96 307.87;
    stroke-dashoffset: -307.86;
  }
  25.01% {
    animation-timing-function: ease-in;
    stroke-dasharray: 43.98 307.87;
    stroke-dashoffset: -307.86;
  }
  50% {
    animation-timing-function: steps(1);
    stroke-dasharray: 43.98 307.87;
    stroke-dashoffset: -175.92;
  }
  50.01% {
    animation-timing-function: ease-out;
    stroke-dasharray: 87.96 307.87;
    stroke-dashoffset: -131.94;
  }
  75% {
    animation-timing-function: steps(1);
    stroke-dasharray: 87.96 307.87;
    stroke-dashoffset: 43.98;
  }
  75.01% {
    animation-timing-function: ease-in;
    stroke-dasharray: 43.98 307.87;
    stroke-dashoffset: 0;
  }
  to {
    stroke-dasharray: 43.98 307.87;
    stroke-dashoffset: -131.94;
  }
}

.box {
  width: 50px;
}
